<template>
  <vue-content>
    <vue-header>
      <vue-header-form>
        <el-form :inline="true" :model="formFilter" ref="formFilter">
          <el-form-item label="是否需要物流" prop="isLogistics">
            <el-select v-model="formFilter.isLogistics">
              <el-option label="需要" value="01"></el-option>
              <el-option label="不需要" value="02"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="productName">
            <el-input v-model.trim="formFilter.productName"></el-input>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model.trim="formFilter.orderNo"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="SearchSubmit('formFilter')">查询</el-button>
            <el-button @click="resetForm('formFilter')">重置</el-button>
          </el-form-item>
        </el-form>
      </vue-header-form>
      <!--<vue-header-button>
        <el-button type="primary" @click="create">新增</el-button>
      </vue-header-button>-->
    </vue-header>
    <vue-body>
      <el-table
        v-loading.body="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="orderNo"
          label="订单编号">
        </el-table-column>
        <!--<el-table-column
          label="角色类型">
          <template scope="scope">
            {{ scope.row.roleType | type }}
          </template>
        </el-table-column>-->
        <el-table-column
          prop="productName"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="integral"
          label="使用积分" width="110">
        </el-table-column>
        <el-table-column
          label="支付方式" width="110">
          <template scope="scope">
            {{ scope.row.payType | payType }}
          </template>
        </el-table-column>
        <!--<el-table-column
          prop="distributionType"
          label="配送方式" width="100">
        </el-table-column>-->
        <el-table-column
          prop="totalAmount"
          label="总金额" width="90">
        </el-table-column>
        <el-table-column
          prop="payTime"
          label="订单时间" width="180">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名称" width="100">
        </el-table-column>
        <el-table-column
          prop="isLogistics"
          label="物流" width="90">
          <template scope="scope">
            {{ scope.row.isLogistics | isLogistics }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template scope="scope">
          	<el-button
          		v-if="scope.row.isLogistics === '01'&& !scope.row.logisticsCode ?true:false"
              size="small"
              @click="create(scope.$index, scope.row)">添加物流</el-button>
            <el-button
              size="small"
              v-if="scope.row.isLogistics === '01' && scope.row.logisticsCode ?true:false"
              @click="handleEdit(scope.$index, scope.row)">修改物流</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handleDetail(scope.$index, scope.row, tableData)">详情</el-button>
          </template>
      </el-table-column>
      </el-table>
    </vue-body>
    <vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="pageSize">
      </el-pagination>
    </vue-footer>
    <edit-role
      ref="edit-role"
      @close="editFinish"
      :view="view"
      v-if="view ==='create' || view ==='edit'"/>
    <edit-detail
      ref="edit-detail"
      @close="editFinish"
      :view="view"
      v-if="view ==='detail'"/>
  </vue-content>
</template>

<script>
  import {query,queryDetail} from '@/services/order'
  import {RequestError} from '@/services/errors'
  import {deepClone} from '@/utilities/object'
  import EditRole from './edit'
  import EditDetail from './Detail'
  export default {
    name: 'role-table',
    components: {EditRole,EditDetail},
    data: () => ({
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      formFilter: {
        isLogistics: "",
        productName:"",
        orderNo:""
      },
      loading: false,
      view: ''
    }),
    methods: {
      async loadData () {
        this.loading = true
        try {
          let data = await query(Object.assign({currentPage: this.currentPage},{perPage:10}, this.formFilter))
          // debugger
//        console.log(data)
          this.tableData = data.orderList
          this.pageSize = parseInt(data.totalResult)
        } catch (e) {
          if (e instanceof RequestError) {
            this.$alert(e.message, '提示', {
              type: 'error',
              confirmButtonText: '确定'
            })
          } else {
            throw e
          }
        }
        this.loading = false
      },
      async  create (index, data) {
//    	console.log(data)
        this.view = 'create'
        await this.$nextTick()
        this.$refs['edit-role'].orderNo = data.orderNo
      },
      async handleEdit (index, data) {
        this.view = 'edit'
//      let orderData = await queryDetail(data.id)
        await this.$nextTick()
        this.$refs['edit-role'].dialogFormVisible = true
        this.$refs['edit-role'].formData = data
      },
      async handleDetail (index, data) {
        this.view = 'detail'
        await this.$nextTick()
        this.$refs['edit-detail'].id = data.id
        this.$refs['edit-detail'].loadData()
      },
      SearchSubmit () {
        this.currentPage = 1
        this.loadData()
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.currentPage = 1
        this.loadData()
      },
      editFinish (needRefresh) {
        this.view = ''
        if (needRefresh) {
          this.loadData()
        }
      }
    },
    watch: {
      currentPage (newVal) {
        this.loadData(newVal)
      }
    },
    filters: {
      orderStatus (value) {
      	//订单状态
        return {'01': '初始', '02': '已完成','03':'关闭'}[value]
      },
      distributionStatus (value) {
      	//配送状态
        return {'01': '待发货', '02': '已发货'}[value]
      },
      payType (value) {
      	//支付方式
        return {'01': '微信支付', '02': '芸券支付','03':'兴业银行'}[value]
      },
      isLogistics(value) {
      	//是否需要物流
        return {'01': '需要', '02': '不需要'}[value]
      },
    },
    created () {
      this.loadData()
    }
  }
</script>
